<template>
 	<div class="card mb-0" id="bill-detail-vas" v-if="detailInfo !== undefined && detailInfo !== null && detailInfo.vasOrders.length > 0">
    <div class="card-header" v-if="!hideLabel">服务单明细</div>
    <table class="table table-striped table-hover table-sm mb-0">
      <thead v-if="!hideLabel">
          <tr>
              <th>产品名称</th>
              <th>姓名</th>
              <th>单价</th>
              <th>数量</th>
              <th>实收 </th>
              <th>成本</th>
              <th>利润</th>
              <th>备注</th>
          </tr>
      </thead>
      <tbody>
        <template  v-for="info in detailInfo.vasOrders">
          <tr :key="info.id">   
              <td>{{info.productName}}</td>
              <td>{{info.passengerName}}</td>                               
              <td>{{info.price}}</td>                               
              <td>
                  {{info.count}}
              </td>
              <td>{{info.total}}</td>
              <td>{{info.cost}}</td>
              <td>{{info.profit}}</td>
              <td>{{info.remark}}</td>
          </tr>
          <template v-for="(psgInfo, index) in info.passengers">
            <tr :key="psgInfo.id">
              <td></td>
              <td>{{psgInfo.name}}</td>
              <td colspan="5"></td>
              <td>
                <template v-if="detailInfo.bePaid !== '1' && index > 0">
                  <button class="btn btn-warning" @click.stop="splitBill(info.id, psgInfo.id)">分离帐单</button>
                </template>
              </td>
            </tr>
          </template>
          
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
import { splitVasBill } from '@/api/bill.js'
  export default {
    props: {
      detailInfo: {
        type: Object
      },
      hideLabel: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      splitBill: function(billVasOrderId, psgId) {
        
        splitVasBill(this.detailInfo.id, billVasOrderId, {psgId}, v => {
          console.log(v)
          if (v.status === 'OK') {
            this.$emit("refresh")
          }
        })
      }
    }
  }		
</script>